$(function () {

    //参数设置为全局对象,因为将来筛选和分页都要用到
    let q = {
        pagenum: 1,     //是	int	页码值
        pagesize: 5,    //是	int	每页显示多少条数据
        cate_id: '',    //否	string	文章分类的 Id
        state: '',      //否	string	文章的状态，可选值有：已发布、草稿
    }
    // 需求1:初始化文章列表 --封装成函数,将来复用

    let layer = layui.layer
    initArticleList()   //调用初始化文章列表
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            // GET类型用params属性,POST类型用data属性
            params: q
        }).then(res => {
            // console.log(res.data.data)
            if (res.data.status) {
                return layer.msg(res.data.message)
            }
            // 渲染
            let arr = []
            res.data.data.forEach(function (ele) {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${ele.pub_date}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button class="layui-btn layui-btn-xs">编辑</button>
                            <button data-id="${ele.Id}" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `)
            })
            // 循环结束后赋值
            $('tbody').empty().html(arr.join(""))

            renderPage(res.data.total)


        })
    }



    // 需求2:渲染筛选中的文章类别列表
    let form = layui.form
    initArtCateList()//函数不调用不执行
    function initArtCateList() {
        axios({
            method: "GET",
            url: '/my/article/cates',
        }).then(res => {
            if (res.data.status) {
                return layer.msg(res.data.message)
            }
            // 成功后渲染
            let arr = ['<option value="">请选择文章分类</option>']
            res.data.data.forEach(function (ele) {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                
                `)
            })
            // 循环结束后赋值
            let str = arr.join("")
            $('[name=cate_id]').empty().html(str)
            //form.render();可以渲染layui里面的select/checkbox/radio
            form.render();
        })
    }

    // 需求3:筛选
    $('#searchForm').on('submit', function (e) {
        q.pagenum = 1;
        e.preventDefault()
        // cate_id和state的值修改,根据form表单的值修改
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()

        initArticleList()

    })

    //需求4:分页
    function renderPage(total) {
        let laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每页显示多少条
            curr: q.pagenum, //第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip', 'refresh'],
            limits: [2, 4, 6, 8],
            prev: '<',
            next: '>',

            // 页面加载的时候,页码切换的时候会触发,每页显示条数改变的时候会触发
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }


        });
    }

    // 需求5:删除
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')

        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            //
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                // 成功,提示,刷新页面
                layer.msg("恭喜,删除成功")
                //(删除ajax成功后)当我们再次发起请求的时候,如果页面中还有一条数据,当前页-- ,当前页大于0有资格
                // if ($('.del-btn').length == 1 && q.pagenum >= 2) q.pagenum--
                // 优化:短路运算,前面的代码满足条件,后面的才会执行
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--
                initArticleList()
            })
            layer.close(index);
        });
    })
})